import React from 'react'


class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            userName: ''
        };
    }

    inputChange = () => {
        /**
         * 获取Dome节点
         * 1、给元素定义ref属性 
         * 2、通过this.refs.userName获取DOM节点 
         */
        let val = this.refs.userName.value; 
        this.setState( {
            userName: val
        })
    }

    getInput = () => {
        alert(this.state.userName); 
    }

    inputKeyUp = (e) => {
        console.log(e.keyCode);
        if(e.keyCode == 13){
            console.log(e.target.value)
        }
    }
    render() {
        return (
            <div> 
                我是List组件  
                <input ref="userName" onChange={this.inputChange}/>
                <button onClick={this.getInput}>获取input的值</button>
                <input onKeyUp={this.inputKeyUp}/>
            </div>
        );
    }
}

export default List;